<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="mpd-code-exam-tabs">
 			<ul>
 				<li><a href="#tab-mpd-exam1">ตัวอย่างการเรียกใช้ Web Service</a></li>
 				<li><a href="#tab-mpd-exam2">ตัวอย่าง Source Code in JAVA</a></li>
 				<li><a href="#tab-mpd-exam3">ตัวอย่าง Source Code in .NET</a></li>
 			</ul>
 			<div id="tab-mpd-exam1"  style="overflow: hidden; width: 97%">
	 		<form action="" id="mpdSearchFm">
				<div class="field">
					<label for="id">รหัส:</label> <input type="text" id="id" name="param.id" class="text ui-widget-content ui-corner-all" />
				</div>
				<div class="field">
					<label for="idCard">หมายเลขบัตร ปปช:</label> <input type="text" id="idCard" name="param.idCard" class="text ui-widget-content ui-corner-all" />
				</div>
				<div class="field">
					<label for="name">ชื่อ:</label>  <input type="text" id="name" name="param.name" class="text ui-widget-content ui-corner-all" />
				</div>
				<div class="field">
					<label for="surname">นามสกุล:</label> <input type="text" id="surname" name="param.surname" class="text ui-widget-content ui-corner-all" />
					<input type="button" id="mpd-searchbtn" value="ค้นหาข้อมูล" >
					<span style="display:none;" id="indicator2"><img alt="loading" style="position: relative; top:5px" src="../images/loading.gif"> Loading... </span>			
				</div>
			</form>
			<table id="result2" style="display:none"></table>
			</div>
			<div id="tab-mpd-exam2"  style="overflow: hidden; width: 97%">
				<p>			
		....
				</p>
			</div>
			<div id="tab-mpd-exam3"  style="overflow: hidden; width: 97%">
				<p>			
		....
				</p>		
			</div>
		</div>		 
		<script type="text/javascript">
		$("#mpd-code-exam-tabs").tabs();
		var mpdGrid = $("#result2").flexigrid(
				{					
					dataType: 'json',
					colModel : [
						{display: 'No', name : 'no', width : 40, sortable : true, align: 'center'},
						{display: 'รหัส', name : 'id', width : 80, sortable : true, align: 'center'},
						{display: 'หมายเลขบัตร ปปช', name : 'idCard', width : 120, sortable : true, align: 'left'},					
						{display: 'ชื่อ - สกุล', name : 'fullname', width : 200, sortable : true, align: 'left'}
						],
					sortname: "No",
					sortorder: "asc",
					title: 'ผลลัพธ์ การค้นหาข้อมูลสมาชิก',
					showTableToggleBtn: false,
					width: 590,
					height: 150
				}
		);
		$("#mpd-searchbtn").click(function(){
			$("#mpd-searchbtn").css("display","none");
			$("#indicator2").css("display","inline");
			$.post("json/invoke-member-paid-dept",$("#mpdSearchFm").serialize(),function(data){
				if(data.success){
					mpdGrid.flexAddData(data.gridModel);					
				}else{
					apMessageBox.error({errorImage:"../images/error-32x32.png",title: "ERROR",
						message:"Exception Occured!! :: "+data.message,stacktrace:data.stacktrace});
				}
				$("#indicator2").css("display","none");
				$("#mpd-searchbtn").css("display","inline");
			});
		});
		</script>